<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>公众号数据</span>
    </div>
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>
    <v-tableBtns
      :table-title="exportTitle"
      :table-data="exportData"
      :show-create="true"
      :on-export="handleExport"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      btn-class="btn"
      @sortChange="sortChange"
      width="60px"
      :deletable="false"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />
  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'Home',
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        // 排序
        sidx: '',
        sortKey: null,
        formTitle: [
          {
            cn: '公众号名称: ',
            en: 'mp_name'
          },
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: 'id',
            en: 'id',
            sortable: true,
            width: '70px'
          },
          {
            cn: '公众号名称',
            en: 'mp_name',
            width: '110px'
          },
          {
            cn: '粉丝数',
            en: 'total_fans',
            sortable: true,
            width: '90px'
          },
          {
            cn: '投入成本',
            en: 'total_cost',
            sortable: true,
            width: '110px'
          },
          {
            cn: '预估收益',
            en: 'income',
            sortable: true,
            width: '110px'
          },
          {
            cn: '实际收益',
            en: 'act_income',
            sortable: true,
            width: '110px'
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
            sortable: true,
            progress:true,
            width: '150px'
          },
          {
            cn: '近7日日均回收',
            en: 'daily_income',
            sortable: true,
            width: '150px'
          },
          {
            cn: '总体回本周期',
            en: 'payback_period',
            sortable: true,
            width: '150px'
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
            sortable: true,
            width: '150px'
          },
          {
            cn: '负责人',
            en: 'operater',
            width: '80px'
          },
          {
            cn: '系统',
            en: 'use_system',
            sortable: true,
            width: '80px'
          },
          {
            cn: '投放渠道',
            en: 'launch_channel',
            sortable: true,
            width: '110px'
          },
          {
            cn: '投放公司',
            en: 'launch_corp',
            sortable: true,
            width: '110px'
          },
        ],
        tableData: [],
        exportTitle: [
          {
            cn: 'id',
            en: 'id',
          },
          {
            cn: '公众号名称',
            en: 'mp_name',
          },
          {
            cn: '主体',
            en: 'owner_corp',
          },
          {
            cn: '投放完粉丝数',
            en: 'fixed_fans_count',
          },
          {
            cn: '固定单粉成本',
            en: 'fixed_fan_cost',
          },
          {
            cn: '投入成本',
            en: 'total_cost',
          },
          {
            cn: '预估收益',
            en: 'income',
          },
          {
            cn: '实际收益',
            en: 'act_income',
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
          },
          {
            cn: '7日日均回收',
            en: 'daily_income',
          },
          {
            cn: '总体回本周期',
            en: 'payback_period',
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
          },
          {
            cn: '负责人',
            en: 'operater',
          },
          {
            cn: '系统',
            en: 'use_system',
          },
          {
            cn: '投放渠道',
            en: 'launch_channel',
          },
          {
            cn: '粉丝数',
            en: 'total_fans',
          },
          {
            cn: '投放公司',
            en: 'launch_corp',
          },
          {
            cn: '投放状态',
            en: 'launch_state',
            type: 'select',
            list: [
              {
                label: '投放成功',
                value: '1'
              },
              {
                label: '投放失败',
                value: '0'
              },
            ],
          },
          {
            cn: '开始投放时间',
            en: 'start_date',
          },
          {
            cn: '单粉成本',
            en: 'per_fan_cost',
          },
          {
            cn: '单粉收益',
            en: 'per_fan_income',
          },
          {
            cn: '实际单粉成本',
            en: 'real_fan_cost',
          },
          {
            cn: '备注',
            en: 'note',
            type: 'textarea'
          },
        ],
        exportData: []

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.startDate = origin[key][0]
            data.endDate = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList() {
        const loading = this.$loading()
        let datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey,
        }
        this.$get('action/TaoMpInfo/dataGrid', datas)
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.payback_period = item.payback_period ? item.payback_period.toFixed(2) : 0
                item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
                item.recovery_rate = item.recovery_rate ? Math.floor(item.recovery_rate*100) : 0
                return item
              })
            }
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow

            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },

      addNew() {
        this.$router.push({
          name: 'taobao.tencentData.detail',
        })
      },
      edit(val) {
        this.$router.push({
          name: 'taobao.tencentData.detail',
          query: {
            id: val.row.id
          }
        })
      },
      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },

      reset() {
        this.filter_info = {}
        this.getTableList()
      },
      handleExport(){
        const loading = this.$loading()
        let datas = {
          ...this.filter_infos,
          sidx: this.sidx,
          sortKey: this.sortKey,
        }
        this.$get('action/TaoMpInfo/GetFile', datas)
          .then(res => {
            let list
            if (res.data && res.data.length) {
              list = res.data.map((item, index) => {
                item.payback_period = item.payback_period ? item.payback_period.toFixed(2) : 0
                item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
                item.recovery_rate = item.recovery_rate ? Math.floor(item.recovery_rate*100) : 0
                item.launch_state = item.launch_state==='1' ? '投放成功': '投放失败'
                return item
              })
            }
            this.exportData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },

      // 排序
      sortChange({column, prop, order}) {
        console.log(column, prop, order)
        this.sidx = prop || ''
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    },
  }
</script>
